<template>
  <div class="MondayGoods.vue">
    <swiper
      class="my-goods-swiper"
      :options="bannerSwiperOption"
      ref="mySwiper"
      @someSwiperEvent="callback"
    >
      <swiper-slide v-for="img in imgs" :key="img.id">
        <img :src="img.url" alt>
      </swiper-slide>
    </swiper>
  </div>
</template>

<script>
// import goodsApi from "@/api/home/home.js";
//swipew 轮播
import "swiper/dist/css/swiper.css";
import { swiper, swiperSlide } from "vue-awesome-swiper";
import goodsImgs from "./data.js";
export default {
  name: "MondayGoods.vue",
  mixins : [goodsImgs],
  components: {
    swiper,
    swiperSlide
    //记得在这里注册组件
  },
  data() {
    return {
      bannerSwiperOption: {
        // some swiper options/callbacks
        // 所有的参数同 swiper 官方 api 参数
        // ...
        slidesPerView: 4,
        slidesPerColumn: 2,
        spaceBetween: 9.5
      },
      // goodsImgs: []
    };
  },
  // created(){
  //   },
  // mounted(){
  //   this.getGoodsimgs();
  // },

  methods: {
    callback() {}
  },
  // getGoodsimgs() {
  //   console.log(111)
  //   goodsApi.getGoodsImgs().then(res => {
  //     //res返回的结果 数据
  //     this.goodsImgs = res;
  //   });
  // }
};
</script>

<style lang='scss' scoped>
@import "@/assets/style/commin.scss";
.my-goods-swiper {
  margin-top: 9px;
  padding: 0 $basPadding;
  // height: 158px;
}
</style>
